<!-- 会员回访管理 -->
<template>
  <div class="mod-config">
      <el-button-group style="margin-bottom: 10px;">
        <el-button type="primary" icon="el-icon-search" @click="searchHandle">查询</el-button>
        <el-button type="primary" icon="el-icon-delete" @click="searchReset">清空</el-button>
      </el-button-group>
      <el-form inline :model="dataForm" @keyup.enter.native="searchHandle">
        <el-form-item label="人群类型">
          <el-select v-model="dataForm.crowdType" placeholder="人群类型">
            <el-option v-for="item in crowdTypeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="回访时间">
          <el-row :span="12">
            <el-col :span="11">
              <el-date-picker v-model="dataForm.feedbackDateMin" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
            </el-col>
            <el-col class="line" :span="2" style="text-align: center;">-</el-col>
            <el-col :span="11">
              <el-date-picker v-model="dataForm.feedbackDateMax" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="回访状态">
          <el-select v-model="dataForm.status" placeholder="回访状态">
            <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="回访满意度">
          <el-select v-model="dataForm.statisfaction" placeholder="回访满意度">
            <el-option v-for="item in statisfactionOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="取镜日期">
          <el-row :span="12">
            <el-col :span="11">
              <el-date-picker v-model="dataForm.actulTakeMirroTimeMin" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
            </el-col>
            <el-col class="line" :span="2" style="text-align: center;">-</el-col>
            <el-col :span="11">
              <el-date-picker v-model="dataForm.actulTakeMirroTimeMax" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="销售单号">
          <el-input v-model="dataForm.saleBillId"></el-input>
        </el-form-item>
        <el-form-item label="客户名称">
          <el-input v-model="dataForm.name"></el-input>
        </el-form-item>
        <el-form-item label="客户卡号">
          <el-input v-model="dataForm.customerCard"></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="dataForm.phone1"></el-input>
        </el-form-item>
        <el-form-item label="会员性别">
          <el-select v-model="dataForm.gender" placeholder="会员性别">
            <el-option v-for="item in genderOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年龄">
          <el-row>
            <el-col :span="11">
              <el-input v-model="dataForm.ageMin"></el-input>
            </el-col>
            <el-col :span="2" style="text-align: center;">至</el-col>
            <el-col :span="11">
              <el-input v-model="dataForm.ageMax"></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="销售时间">
          <el-row :span="12">
            <el-col :span="11">
              <el-date-picker v-model="dataForm.saleCreateTimeMin" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
            </el-col>
            <el-col class="line" :span="2" style="text-align: center;">-</el-col>
            <el-col :span="11">
              <el-date-picker v-model="dataForm.saleCreateTimeMax" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="商品类别">
          <el-checkbox-group v-model="dataForm.ctgIds">
            <el-checkbox v-for="ctg in ctgOptions" :key="ctg.value" :label="ctg.value" :value="ctg.value">{{ctg.name}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="注册时间">
          <el-row :span="12">
            <el-col :span="11">
              <el-date-picker v-model="dataForm.regCreateTimeMin" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
            </el-col>
            <el-col class="line" :span="2" style="text-align: center;">-</el-col>
            <el-col :span="11">
              <el-date-picker v-model="dataForm.regCreateTimeMax" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="积分范围">
          <el-row>
            <el-col :span="11">
              <el-input v-model="dataForm.integralMin"></el-input>
            </el-col>
            <el-col :span="2" style="text-align: center;">至</el-col>
            <el-col :span="11">
              <el-input v-model="dataForm.integralMax"></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="消费笔数">
          <el-row>
            <el-col :span="11">
              <el-input v-model="dataForm.consumptionNumberMin"></el-input>
            </el-col>
            <el-col :span="2" style="text-align: center;">至</el-col>
            <el-col :span="11">
              <el-input v-model="dataForm.consumptionNumberMax"></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="销售类型">
          <el-checkbox-group v-model="dataForm.saleTypes">
            <el-checkbox v-for="saleType in saleTypeOptions" :key="saleType.value" :label="saleType.value" :value="saleType.value">{{saleType.label}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="销售人员">
          <el-input v-model="dataForm.saleUserName"></el-input>
        </el-form-item>
        <el-form-item label="回访次数">
          <el-input v-model="dataForm.feedbackNumber"></el-input>
        </el-form-item>
      </el-form>

      <div class="avue-crud">
        <el-table :data="dataList" border v-loading="dataListLoading" :max-height="tableHeight">
          <el-table-column prop="customerCard" label="会员卡号"></el-table-column>
          <el-table-column prop="name" label="会员姓名"></el-table-column>
          <el-table-column prop="saleBillId" label="配镜单号" width="155"></el-table-column>
          <el-table-column prop="phone1" label="联系电话"></el-table-column>
          <el-table-column prop="saleCreateTime" label="配镜日期" width="155"></el-table-column>
          <el-table-column prop="status" label="回访状态">
            <template slot-scope="scope">
              <span v-if="scope.row.status == '1'">已回访</span>
              <span v-else>未回访</span>
            </template>
          </el-table-column>
          <el-table-column prop="feedbackDate" label="回访日期"></el-table-column>
          <el-table-column prop="statisfaction" label="回访满意度">
            <template slot-scope="scope">
              <span v-if="scope.row.statisfaction == '1'">非常满意</span>
              <span v-if="scope.row.statisfaction == '2'">满意</span>
              <span v-if="scope.row.statisfaction == '3'">不满意</span>
            </template>
          </el-table-column>

          <el-table-column label="操作" fixed="right">
            <template slot-scope="scope">
              <div v-if="scope.row.status == '1'">
                <el-button type="text" icon="el-icon-printer" @click="addOrUpdateHandle(scope.row.id)"
                  :disabled="scope.row.status == 1">回访</el-button>
                <el-button type="text" icon="el-icon-collection" @click="checkDetailCustomerFeedback(scope.row.id)"
                  :disabled="scope.row.status == 0">详情</el-button>
              </div>
              <div v-else>
                <el-button type="text" icon="el-icon-printer" @click="addOrUpdateHandle(scope.row.id)">回访</el-button>
                <el-button type="text" icon="el-icon-collection" disabled>详情</el-button>
                <!-- <el-button type="text" size="small" icon="el-icon-collection" @click="checkDetailCustomerFeedback(scope.row.id)">详情</el-button> -->
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="avue-crud__pagination">
        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" background layout="total, sizes, prev, pager, next"></el-pagination>
      </div>
      <!-- 弹窗, 新增 / 修改 -->
      <table-form v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></table-form>
      <!-- 弹窗，回访详情信息 -->
      <visit-detail v-if="feedbackVisible" ref="backDetail" @refreshDataList="getDataList"></visit-detail>
  </div>
</template>

<script>
  import { mapGetters } from "vuex"
  import { filterParams } from '@/util/tools'
  import { getCtgDataList } from "@/api/eims/check"
  import { customerFeedBackFetchList, customerFeedBackDelObj } from "@/api/eims/customer-feedback"
  import TableForm from "./form"
  import VisitDetail from "./detail"

  export default {
    data() {
      return {
        dataForm: {
          ctgIds: [],
          saleTypes: [],
          key: ""
        },
        dataList: [],
        pageIndex: 1,
        pageSize: 100,
        totalPage: 0,
        dataListLoading: false,
        addOrUpdateVisible: false,
        feedbackVisible: false,
        crowdTypeOptions: [
          { value: 1, label: "普通" },
          { value: 2, label: "高档" },
          { value: 3, label: "青少年渐进" },
          { value: 4, label: "成人渐进" }
        ],
        statusOptions: [
          { value: 1, label: "已回访" },
          { value: 0, label: "未回访" }
        ],
        statisfactionOptions: [
          { value: 1, label: "非常满意" },
          { value: 2, label: "满意" },
          { value: 3, label: "不满意" }
        ],
        genderOptions: [
          { value: 0, label: "男" },
          { value: 1, label: "女" }
        ],
        ctgOptions: [],
        saleTypeOptions: [
          { value: 1, label: "隐形订做" },
          { value: 2, label: "框镜订做" },
          { value: 3, label: "隐形成品" },
          { value: 4, label: "框镜成品" },
          { value: 5, label: "辅料" }
        ]
      };
    },
    components: {
      TableForm,
      VisitDetail
    },
    created() {
      this.getDataList();
      this.getCtgList();
    },
    computed: {
      ...mapGetters(["permissions"]),
      tableHeight: function(){
        return window.innerHeight - 260
      }
    },
    methods: {
      //  查询数据
      searchHandle() {
        this.pageIndex = 1
        this.getDataList()
      },
      // 获取数据列表
      getDataList() {
        this.dataListLoading = true;
        let params1 = { current: this.pageIndex, size: this.pageSize };
        let params2 = filterParams(this.dataForm)
        customerFeedBackFetchList(Object.assign(params1,params2)).then(response => {
          if(response.data.code == '0'){
            this.dataList = response.data.data.records
            this.totalPage = response.data.data.total
          }else{
            this.$message.error(response.data.msg)
          }
          this.dataListLoading = false;
        });

      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val;
        this.pageIndex = 1;
        this.getDataList();
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val;
        this.getDataList();
      },
      // 搜索清空
      searchReset() {
        for (let key in this.dataForm) {
          if (key == "ctgIds" || key == "saleTypes") {
            this.dataForm[key] = [];
          } else {
            this.dataForm[key] = "";
          }
        }
        // this.getCtgList();
      },
      // 新增 / 修改
      addOrUpdateHandle(id) {
        this.addOrUpdateVisible = true;
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id);
        });
      },
      // 删除
      deleteHandle(id) {
        this.$confirm("是否确认删除ID为" + id, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(function() {
            return customerFeedBackDelObj(id);
          })
          .then(response => {
            if(response.data.code == '0'){
              this.$message.success("删除成功")
              this.getDataList()
            }else{
              this.$message.error(response.data.msg)
            }
          });
      },

      // 格式转换
      customeFeedbackContentFormatter(row, column) {
        let content = row.feedbackContent;
        let text = "";
        switch (content) {
          case ("1", 1):
            text = "度数不适";
            break;
          case ("2", 2):
            text = "松紧不适";
            break;
          case ("3", 3):
            text = "佩戴中";
            break;
          case ("4", 4):
            text = "未戴未取";
            break;
          case ("5", 5):
            text = "自身原因";
            break;
          case ("6", 6):
            text = "眼镜本身";
            break;
          case ("7", 7):
            text = "其他";
        }
        return text;
      },
      // 查看会员回访详细信息
      checkDetailCustomerFeedback(id) {
        this.feedbackVisible = true;
        this.$nextTick(() => {
          this.$refs.backDetail.init(id);
        });
      },
      getCtgList() {
        getCtgDataList().then(result => {
          let list = result.data.data.records;
          let options = [];
          list.forEach(item => {
            options.push({
              value: item.id,
              name: item.name
            });
          });
          this.ctgOptions = options;
        });
      },
    }
  };
</script>
